<template>
  <div>
    <div class="operator-area">
      <a-button type="primary" @click="handleAddCol">添加列</a-button>
    </div>
    <div class="table-area">
       <a-table
        rowKey="id"
        bordered
        :key="tableSetting.key"
        :columns="tableColumns"
        :loading="tableSetting.loading"
        :customRow="customRow"
        :dataSource="tableDataSource"
        :pagination="false"
        :rowSelection="{
          selectedRowKeys: tableSetting.selectedRowKeys,
          onChange: onTabalRowChange
        }"
        :scroll="{ x: 1500 }">
          <template v-for="(editColumn, index) in editColumns" 
            :slot="editColumn.value" slot-scope="text, record">
            <span :key="index">
              <!-- 可编辑input -->
              <template v-if="(
                  (editingRecord === record.id) && 
                  (editingColumn === editColumn.value) && 
                  ('input' === editColumn.type)
                )">
                <a-input 
                  v-focus
                  size="small"
                  :value="text"
                  @blur="e => handleInputBlur(e.target.value, record, editColumn.value)"
                  @change="e => handleInputChange(e.target.value, record, editColumn.value)"
                />
              </template>
              <!-- 可编辑select -->
              <template v-else-if="(
                  (editingRecord === record.id) && 
                  (editingColumn === editColumn.value) && 
                  ('select' === editColumn.type)
                )">
                <!-- 立项年度 -->
                <template v-if="editColumn.value == 'lxnd'">
                  <year-select
                    v-focus
                    :defaultValue="text"
                    @blur="(value) => handleSelectBlur(value, record, editColumn.value)"
                    @change="(value) => handleSelectChange(value, record, editColumn.value)">
                  </year-select>
                </template>
              </template>
              <!-- 默认内容 -->
              <div v-else
                @click="handleClickChange(record, editColumn.value)">
                <span v-if="editColumn.value == 'type'">
                  {{ record.typeText }}
                </span>
                <span v-else>
                  {{ text }}
                </span>
              </div>
            </span>
          </template>
       </a-table>
    </div>
    <div class="table-data">
      <a-card :bodyStyle="{ height: '500px', overflow: 'auto' }">
        <a-row>
          <a-col :span="12">
            <pre>{{ tableDataSource }}</pre>
          </a-col>
          <a-col :span="12">
            <pre>{{ tableColumns }}</pre>
          </a-col>
        </a-row>
      </a-card>
    </div>
  </div>
</template>

<script>

export default {
  name: "AddRowTable",
  components: {
  },
  data () {
    return {
      tableSetting: {
        key: +new Date(),
        loading: false,
        pagination: {},
        selectedRowKeys: [],
        editingRecordIndex: ""
      },
      tableColumns: [
        {
          title: "项目名称",
          dataIndex: "name",
          width: 250,
          align: "left",
          customCell: (record, rowIndex) => {
            return {
              class: ['type-class']
            }
          }
        },
        {
          title: "项目编码",
          dataIndex: "code",
          width: 250,
          align: "left",
          customCell: (record, rowIndex) => {
            return {
              class: ['type-class']
            }
          }
        },
        {
          title: "项目地址",
          dataIndex: "addr",
          width: 150,
          scopedSlots: { customRender: "addr" }
        },
        {
          title: "负责人",
          dataIndex: "fzUser",
          width: 150,
          scopedSlots: { customRender: "fzUser" }
        },
        {
          title: "立项年度",
          dataIndex: "lxnd",
          width: 150,
          scopedSlots: { customRender: "lxnd" }
        },
        {
          title: "建设性质",
          dataIndex: "jsxz",
          width: 100,
          customRender: (text, record, index) => {
            return record.jsxzText
          },
        }
      ],
      tableDataSource: [
        {
          id: 1,
          name: "建设项目1", 
          type: "3",
          typeText: "收费公路",
          code: "132664974474",
          addr: "北京市",
          addrVisible: false,
          jsxz: 2,
          jsxzText: "改建",
          lxnd: "2020",
          fzUser: "李松",
          editVisible: false,
        },
        {
          id: 2,
          name: "建设项目2", 
          type: "5",
          typeText: "民用机场",
          code: "132664978874",
          addr: "天津市",
          addrVisible: true,
          jsxz: 2,
          jsxzText: "改建",
          lxnd: "2020",
          fzUser: "李松",
          editVisible: false,
        }
      ],
      editColumns: [
        { value: "addr", type: "input" },
        { value: "fzUser", type: "input" },
        { value: "lxnd", type: "select" },
        { value: "type", type: "select" },
      ],
      editingColumn: "",
      editingRecord: "",
      addColNum: 1,
      defaultYear: new Date().getFullYear()
    }
  },
  methods: {
    // 行个性化配置
    customRow (record, index) {
      return {
        on: {
          click: (event) => {
          }
        }
      }
    },
    /** 表格前置选中框选择 */
    onTabalRowChange (selectedRowKeys) {
      this.tableSetting.selectedRowKeys = selectedRowKeys;
    },
    /**
     * 可编辑单元格点击
     */
    handleClickChange (record, column) {
      this.editingRecord = record.id
      this.editingColumn = column
    },
    /**
     * 表格中可编辑td中的input数据变化
     */
    handleInputChange (value, record, column) {
      const resData = [...this.tableDataSource]
      let target = resData.filter(item => {
        return item.id === record.id
      })[0]
      if (target) {
        target[column] = value
        this.tableDataSource = resData
      }
    },
    /**
     * 表格中可编辑td中的input失去焦点
     */
    handleInputBlur (value, record, column) {
      this.editingRecord = ""
      this.editingColumn = ""
    },
    /**
     * 表格中可编辑td中的select数据改变
     */
    handleSelectChange (value, record, column, label, labelColumn) {
      const resData = [...this.tableDataSource]
      let target = resData.filter(item => {
        return item.id === record.id
      })[0]
      if (target) {
        target[column] = value
        if (label) {
          target[labelColumn] = label[0]
        }
        this.tableDataSource = resData
      }
    },
    /**
     * 表格中可编辑td中的select失去焦点
     */
    handleSelectBlur (value, record, column) {
      this.editingRecord = ""
      this.editingColumn = ""
    },
    /**
     * 添加行数据
     */
    handleAddCol () {
      const { tableColumns } = this
      let resData = [...this.tableDataSource]
      let dataTitle = this.defaultYear + "年"
      let dataKey = "ZC" + this.defaultYear
      let newColData = {
        title: dataTitle,
        dataIndex: dataKey,
        width: 100,
        align: "left"
      }
      this.tableColumns = [...tableColumns, newColData];
      resData.forEach(element => {
        element[dataKey] = "0.00"
      });
      this.tableDataSource = resData
      this.defaultYear++
    },
  }
}
</script>
